<template>
	<view class="g-dropdown-item">
		<view class="label-wrap"  @click="clickDropItem">
			<text class="label" 
					:class="[dropBarSatus?'active-title':'defaul-title']">
					{{viewValue.length>4?viewValue.slice(0,4)+'..':viewValue}}
				</text>
			<view  :class="[dropBarSatus?'label-icon-top':'label-icon-bot',]">
				<span class="iconfont icon-arrow-right"></span>
			</view>
		</view>
		<view class="g-dropdown-selectBox" 
				v-show="!option&&dropBarSatus"
				>
				<view class="g-dropdown-selectBox-wrap">
					<slot></slot>
				</view>
		</view>
		<!-- 如果传入了option那么默认slot将无效 -->
		<view class="g-dropdown-option-wrap" v-if="option&&dropBarSatus">
			<view v-for="(item,index) in option" class="option-sub" @click="clickOptionSub(index,item)">
				<text :class="optionActive==index?'option-sub-title-active':'option-sub-title'">
					{{item[prop.label]}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '../../utils/utils.js';
export default {
	name: 'g-dropdown-item',
	data() {
		return {
			dropParent: null,
			dropBarSatus:false,
			optionActive:0,//默认选中项
			subValue:null,//交互的value值
			viewValue:'',//显示值
			titelChange:false,
		};
	},
	props: {
		value:'',
		option:{
			type:Array,
		},
		prop:{
			type:Object,
			default:()=>{
				return {
					label:"label",
					value:"value"
				}
			}
		}
	},
	computed: {},
	methods: {
		clickOptionSub(index,item){
			//点击下拉项
			this.titelChange = true
			this.optionActive = index
			this.subValue = item[this.prop.value]
			this.close()
		},
		close(){
			//关闭遮罩与隐藏下拉
			this.hideMask()
			this.dropBarSatus = false
		},
		clickDropItem(){
			this.openMask()
			this.selectShow()
		},
		hideMask(){
			//隐藏遮罩层
			this.dropParent.maskShow = false
		},
		openMask(){
			//显示遮罩层
			this.dropParent.maskShow = true
		},
		selectShow(){
			//下拉框的显示
			this.dropParent
			this.dropParent.dropChild.forEach((item,index)=>{
				//重置所有下拉框为隐藏
				item.dropBarSatus = false
			})
			this.dropBarSatus =true
		},
		getViewValue(value){
			//同步视图上的值
			if(this.option.length!=0){
				let filterViewArr = this.option.filter(item=>item[this.prop.value]==value)
				if(filterViewArr.length!=0){
					this.viewValue = filterViewArr[0][this.prop.label]
				}
			}
		},
		init() {
			//获取父组件实列
			this.dropParent = utils.findComponents('g-dropdown',this, '$parent');
			this.dropParent.dropChild.push(this);
		}
	},
	watch:{
		value(n,o){
			if(this.option){
				//普通选择模式
				this.subValue = n
			}else{
				//插槽选择模式，已不存在可选择项，value值直接是显示的值
				this.viewValue = n
			}
		},
		subValue(n,o){
			this.$emit("input",n)
			this.$emit("change",n)
			this.getViewValue(n)
		},
	},
	mounted() {
		this.init()
		if(this.option){
			this.subValue = this.value
		}else{
			//插槽选择
			this.viewValue = this.value
		}
	},
	created() {
		
	}
};
</script>
<style scoped lang="scss">
@import "../../theme.scss";
@import "../../iconfont.css";
.g-dropdown-item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 100%;
	background: #ffffff;
	color: #423d3d;
	z-index: 20;
}
.defaul-title{
	color: #585858;
	font-size: 28rpx;
}
.active-title{
	color:$g-main-primary;
	font-size: 28rpx;
}
.label-wrap{
	.label{
		font-weight: 400;
		font-size: 28rpx;
	}
	.label-icon{
		&-top{
			display: inline-block;
			transition: 0.3s;
			transform: rotate(270deg) scale(0.8);
			color: $g-main-primary;
			font-size: 24rpx;
		}
		&-bot{
			display: inline-block;
			transform: rotate(90deg) scale(0.8);
			transition: 0.3s;
			color: #b3b3b3;
			font-size: 24rpx;
		}
	}
}
.g-dropdown-option-wrap{
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 82rpx;
	width: 100vw;
	right: 0;
	background: #FFFFFF;
	z-index: 19;
	border-radius: 0 0 10rpx 10rpx;
	.option-sub{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		&-title{
			color: #3f3f3f;
			&-active{
				color: $g-main-primary;
			}
		}
	}
}
.g-dropdown-selectBox{
		position: absolute;
		display: flex;
		flex-direction: column;
		top: 82rpx;
		width: 100vw;
		right: 0;
		background: #FFFFFF;
		z-index: 19;
	}
</style>
